<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
{include file='header.tpl' JS=$smarty.const.BAOGG_JS CSS=$smarty.const.BAOGG_CSS}        
<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
}
.grid-row-span .x-grid3-row {
    border-bottom: 0;
}
.grid-row-span .x-grid3-col {
    border-bottom: 1px solid #ededed;
}
.grid-row-span .row-span {
    border-bottom: 1px solid #fff;
}
.grid-row-span .row-span-first {
    position: relative;
}
.grid-row-span .row-span-first .x-grid3-cell-inner {
    position: absolute;
}
.grid-row-span .row-span-last {
    border-bottom: 1px solid #ededed;
}

</style>

        <script type="text/javascript"> 
		var json_rule={$json_rule};
        var  LANG={$LANG};
	var  json_rule={$json_rule};
	{literal}
	
	function getKeys(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

Ext.onReady(function(){
	Ext.QuickTips.init();
	
                
	{/literal}   
	var win_form=Ext.create('Ext.window.Window', {$form});
       var form = Ext.getCmp("ext_form");
	{$grid}
	
	
		

		
	
	

	
	
	 Ext.create('Ext.container.Viewport', {
		    layout: 'border',
		    renderTo: Ext.getBody(),
                    items: grid				
                });
         {if $is_post} 
		win_form.hide();
        {else}
		win_form.show().center();
                {/if}   
                
                
 
 function getColumnConfig(){
 	
 	var rule_fields=[];		
	var col_title = { _name:''};
	
	Ext.each(grid.columns, function(name, index, self) {
		if(name.items.length > 0) {
					 //console.info(name.items);
			Ext.each(name.items.items, function(sub_name, sub_index, sub_sel) {
					   // console.info(sub_name);
				col_title[sub_name.dataIndex] = name.text+"  "+ sub_name.text;
				
				rule_fields.push(sub_name.dataIndex);
					
			})
		}else if(!Ext.isEmpty(name.dataIndex) && !Ext.isEmpty(name.text)){
			col_title[name.dataIndex] = name.text;	
			col_title['_name']=Ext.isEmpty(col_title['_name'])?name.text:col_title['_name']+'/'+	name.text;
			//console.info(col_title);
		}
	})
	
	return { 'rule_fields':rule_fields,'col_title':col_title };
 }
function generateStore(){ 
	var store_data=[];
	var prev_data={};
	
	var store1 = Ext.clone(Ext.data.StoreManager.lookup('gridStore'));
	Ext.Array.each(store1.data.items, function(name, index, countriesItSelf) {
		
		name.data['_name']='';
				
		for(var prop in name.data) {
							
			if( prop.indexOf('rule_id_') === 0) {			
				name.data[prop] = Ext.isNumeric(name.data[prop])? parseFloat(name.data[prop]):0;
				
				
			}else if(!Ext.isEmpty(prop) && prop!='_name'){
				if(Ext.isEmpty(name.data[prop])  && !Ext.isEmpty(prev_data[prop])  ){
					name.data[prop]=prev_data[prop];
				}
				//console.info(prop);console.info(name.data['_name']);
				name.data['_name']=Ext.isEmpty(name.data['_name'])?name.data[prop]:name.data['_name'] +'/'+name.data[prop];	
					
					
						
			}
		}
		prev_data=name.data;
		store_data.push(name.data);
	});
	return store_data;
	
}
               
                grid.getDockedItems()[0].add({ text:'按列显示图表',handler : function(btn, ev) {
								

var column_config=getColumnConfig();
 	var rule_fields=column_config['rule_fields'];		
	var col_title = column_config['col_title'];	


var chart_store = Ext.create('Ext.data.JsonStore', {
        fields: getKeys(col_title),
        data: generateStore()
    });


var series_cfg=[];
for(var i=0,cnt=rule_fields.length;i<cnt;i++){
	series_cfg.push({
			type : 'line',
			highlight : {
				size : 7,
				radius : 7
			},
			axis : 'left',
			smooth: true,
			xField : '_name',
			yField : rule_fields[i],
			title:col_title[rule_fields[i]],
			markerConfig : {
				type : 'cross',
				size : 4,
				radius : 4,
				'stroke-width' : 0
			}
		});
}
//console.info(chart_store);console.info(series_cfg);console.info(col_title);
Ext.create('Ext.Window', {
	width : 800,
	height : 400,
	minHeight : 400,
	minWidth : 550,
	hidden : false,
	maximizable : true,
	title : '按列显示图表',
	renderTo : Ext.getBody(),
	layout : 'fit',	
	items : {
		xtype : 'chart',
		style : 'background:#fff',
		animate : true,
		store : chart_store,
		shadow : true,
		theme : 'Category1',
		legend : {
			position : 'right'
		},
		axes : [{
			type : 'Numeric',
			minimum : 0,
			position : 'left',
			fields : rule_fields,
			title : '品牌指数',
			minorTickSteps : 1,
			grid : {
				odd : {
					opacity : 1,
					fill : '#ddd',
					stroke : '#bbb',
					'stroke-width' : 0.5
				}
			}
		}, {
			type : 'Category',
			position : 'bottom',
			fields : '_name',
			title : col_title['_name']
		}],
		series : series_cfg
	}
});
							} } );
							
			
			
			
			grid.getDockedItems()[0].add({
			text : '按行显示图表',
			handler : function(btn, ev) {
				var column_config = getColumnConfig();
var rule_fields = column_config['rule_fields'];
var col_title = column_config['col_title'];

var chart_store = Ext.create('Ext.data.JsonStore', {
	fields : getKeys(col_title),
	data : generateStore()
});


var series_title=[];
for(var i=0,cnt=rule_fields.length;i<cnt;i++){
	series_title.push(col_title[rule_fields[i]]);
}

Ext.create('Ext.Window', {
	width : 800,
	height : 300,
	minHeight : 300,
	minWidth : 550,
	hidden : false,
	maximizable : true,
	title : '按行显示图表',
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : {
		id : 'chartCmp',
		xtype : 'chart',
		style : 'background:#fff',
		animate : true,
		shadow : true,
		store : chart_store,
		legend : {
			position : 'right'
		},
		axes : [{
			type : 'Numeric',
			position : 'bottom',
			fields : rule_fields,
			minimum : 0,
			label : {
				renderer : Ext.util.Format.numberRenderer('0,0')
			},
			grid : true,
			title : '品牌指数'
		}, {
			type : 'Category',
			position : 'left',
			fields : ['_name'],
			title : col_title['_name']
		}],
		series : [{
			type : 'bar',
			axis : 'bottom',
			xField : '_name',
			title:series_title,
			yField : rule_fields
		}]
	}
});
			}
		})
				   
	});
</script>

</head>
<body>
  <form id='myForm' name='myForm' method="post">
         <input type="hidden" name="values" id="names" />
  </form>
       
<div id="grid"></div>


</body>
</html>
